<template>
    <div id="myCharCate" :style="{width: '250px', height: '140px'}"></div>
</template>

<script>
    import echarts from "echarts";

    export default {
        name: "lineCate",
        props: {
            listData: Array
        },
        data(){
            return{
                grayBar:[100, 100],
            }
        },
        mounted() {
            this.inIt();
        },
        watch:{
            listData: {
                deep: true,
                handler() {
                    this.inIt();
                },
            },
        },
        methods:{
            inIt(){
                console.log(this.listData)
                let myChart = echarts.init(document.getElementById('myCharCate'));
                let that = this;
                this.option = {
                    backgroundColor: 'transparent',
                    grid: {
                        left: '-115', // 距离dom间距
                        right: '0',
                        top: 25,
                        bottom: 25,
                        containLabel: true,
                    },
                    xAxis: [{
                        type: "value",
                        axisPointer: {
                            type: "shadow"
                        },
                        // 横坐标 分割线等取消显示
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false,

                        }
                    }],
                    yAxis: [{
                        type: "category",
                        inverse: true,
                        axisLabel: {
                            verticalAlign: "bottom",
                            align: "left",
                            padding: [0, 15, 15, 6],
                            textStyle: {
                                fontSize: 16,
                                color: "#bebebe",
                                fontFamily: "Source Han Sans CN"
                            },
                            formatter(value, index) {
                                return `${value}`;

                            },

                        },
                        // 纵坐标数据
                        data: ["当日车辆里程数", "月度车辆里程数"],

                        yAxisIndex: 0,
                        // 横坐标 分割线等取消显示
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        }
                    },
                      {
                        type: "category",
                        inverse: true,
                        axisLine: {
                          show: false
                        },
                        axisTick: {
                          show: false
                        },
                        axisLabel: {
                          show: true,
                          inside: false,
                          verticalAlign: "bottom",
                          // 位置 上右下左
                          padding: [0, 0, 0, 0],
                          lineHeight: "20",
                          textStyle: {
                            fontSize: 16,
                            color: "white",
                            fontFamily: "SourceHanSansCN-Regular"
                          },
                          formatter(value, index) {
                            return ` `;

                          },
                        },
                        // 统计的总量 用纵坐标模拟
                        data: [Math.abs(this.listData[0]), Math.abs(this.listData[1])],
                      },

                    ],
                    series: [
                        {
                            show: true,
                            type: 'pictorialBar',
                            symbol: 'fixed',
                            symbolSize: [5, 17],
                            symbolMargin: 2,
                            symbolRepeat: 'repeat',
                            barWidth: 1, // 统计条宽度
                            symbolOffset:[-5,0],
                            itemStyle: {
                                normal: {
                                    color: '#000',
                                },
                            },
                            z: 3,
                            data: [Math.abs(this.listData[0]), Math.abs(this.listData[1])],
                        },

                        {
                            show: true,
                            type: 'pictorialBar',
                            symbol: 'fixed',
                            symbolSize: [5, 15],
                            symbolMargin: 2,
                            symbolRepeat: 'repeat',
                            barGap: '-100%',

                            barWidth: 2, // 统计条宽度
                            itemStyle: {
                                normal: {
                                    color: '#444245',
                                },
                            },
                            z: 1,

                            data: that.grayBar,

                        },
                        {
                            show: true,
                            type: 'bar',
                            barGap: '-100%',
                            barWidth: '15px', // 统计条宽度
                            max: 1,
                            labelLine: {
                                show: false,
                            },
                            z: 2,
                          itemStyle: {
                            normal: {
                              color: {
                                colorStops: [{
                                  offset: 0,
                                  color: '#34afbe', // 0% 处的颜色
                                },
                                  {
                                    offset: 1,
                                    color: '#887332', // 100% 处的颜色
                                  },
                                ],
                                globalCoord: false, // 缺省为 false
                              }

                            },
                          },
                            data: [Math.abs(this.listData[0]), Math.abs(this.listData[1])],
                        },


                    ]
                };
                // 绘制图表
                myChart.setOption(this.option);
                setTimeout(function () {
                    window.onresize = function () {
                        myChart.resize();
                    }
                }, 200)
            }
        }
    }
</script>

<style scoped>

</style>
